// 定义 BookCategoryManager 组件
const BookManager = {
    name: 'BookManager',
    components: {
        BookForm: BookForm, // 局部注册 BookForm 组件
        BookTable: BookTable, // 局部注册 BookTable 组件
        BookQueryForm: BookQueryForm
    },
    template: `
<div>
  <h3>图书列表</h3>
  
   <BookQueryForm  :categories="categories"   @search="handleSearch"/>  
   
   <el-button type="primary" class="button-class" @click="openForm(null)" primary>添加图书</el-button>
   
  <BookTable 
    :books="books"
    @edit="openForm"
    @delete="handleDelete"
  />

  <BookForm
    v-model:visible="showForm"
    :book-data="currentBook"
    :categories ="categories"
    @submit="handleSubmit"
  />
</div>
    `,
    setup() {
        // 使用 Vue 的 ref 函数创建响应式数据
        const books = Vue.ref([])
        const categories = Vue.ref([])
        const showForm = Vue.ref(false)
        const currentBook = Vue.ref(null)
        const queryParams = Vue.reactive({})

        // 组合式函数 - 数据获取
        const fetchData = () => {
            axiosInstance.post('/api/book/query', queryParams)
                .then(response => {
                    // 将获取到的数据赋值给 books
                    books.value = response.data;
                })
        }

        // 提交表单时的处理函数
        const handleSubmit = (formData) => {
            if (formData.bookId) {
                // 更新图书信息
                axiosInstance.put('/api/book/', formData)
                    .then(response => {
                        message.success('图书更新成功');
                        showForm.value = false
                        fetchData({})
                    })
                    .catch(error => {
                        // 处理错误的处理
                        showForm.value = true
                    });
            } else {
                // 添加新图书
                axiosInstance.post(`/api/book/`, formData)
                    .then(response => {
                        message.success('图书添加成功');
                        showForm.value = false
                        fetchData({})
                    })
                    .catch(error => {
                        //这里会捕获到拦截器抛出的 Error 对象
                        console.log(error.message)
                        showForm.value = true
                    });
            }
        }

        // 打开表单时的处理函数
        const openForm = (book) => {
            // 如果有 book 参数，则复制其属性到 currentBook
            currentBook.value = book ? {...book} : null
            fetchCategory()
            // 显示表单
            showForm.value = true
        }

        // 删除图书的处理函数
        const handleDelete = (id) => {
            if (confirm('确定删除吗？')) {
                // 发送删除请求
                axiosInstance.delete(`/api/book/${id}`)
                    .then(response => {
                        message.success('图书删除成功');
                        fetchData({})
                    })
            }
        }

        const fetchCategory = () => {
            axiosInstance.get('/api/bookCategory/')
                .then(response => {
                    categories.value = response.data;
                })
        }

        // 处理查询事件
        const handleSearch = (params) => {
            // 直接清空原 queryParams 对象中的所有属性
            for (const key in queryParams) {
                delete queryParams[key];
            }
            // 重新赋值
            Object.assign(queryParams, {...params})
            fetchData();
        }

        // 在组件挂载时获取数据
        onMounted(() => {
            fetchData({})
            fetchCategory()
        })
        // 返回创建的函数和数据，供模板使用
        return {books, showForm, currentBook, openForm, categories, handleDelete, handleSubmit, handleSearch};
    }
};